import Footer from '@/components/footer-main'
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
export default {
  components: { Footer, swiper, swiperSlide, },
  data() {
    return{
      loading: false,
      preview: null,
      productImg: require('@/assets/img/dpbanner.jpg'),
      list: [
        {
          title: '拖拽设计自由布局',
          content: '布局方式多样化，包括自适应布局、绝对布局和tab布局，还能实现多tab轮播，自由发挥创意；零编码拖拽式操作，多种图表、控件、表格等组件任意摆放',
          image: require('@/assets/img/daping/tz_01.png')
        },{
          title: '海量可视化图表',
          content: '数十种的可视化图表效果，包括柱形图、折线图、雷达图、散点图和词云图等，满足不同人群的阅读偏好，为您展示多样数据信息提供全面支持',
          image: require('@/assets/img/daping/hl_02.png')
        },{
          title: '自适应多屏',
          content: '仅需设计一次模板，即可在手机、平板、PC、大屏等多种设备上自适应展示，帮助您随时随地掌握企业数据仅在自适应布局下适用）',
          image: require('@/assets/img/daping/zs_03.png')
        }
      ],
      swiperOptions: {
        loop: true,
        speed: 1000,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      bannerList: [
        {
          img: require('@/assets/img/daping/zhjy.jpg'),
          title: '智慧军营综合展示',
          content: '<p>该大屏采用的是左中右主次结构，是根据业务需求重点展现各公司的分布情况，其次展示贷款提取进度、付款计划提前回购等内容挑选出来比较适合的版面。</p>' +
            '<p>该大屏采用的是左中右主次结构，是根据业务需求重点展现各公司的分布情况，其次展示贷款提取进度、付款计划提前回购等内容挑选出来比较适合的版面。</p>'
        },{
          img: require('@/assets/img/daping/zjfx.jpg'),
          title: '工程造价分析大屏',
          content: '<p>通过工程造价数据分析大屏，可以直观地看到整个工程的总造价和单方造价，查看每个单项工程的造价占比情况，统计建筑装饰、机电安装、室外配套等专业造价和单方造价，检查整个工程在各类项目上的费用情况和占比情况，观察每个工程每个专业的经济指标。</p>' +
            '<p>布局要分清主次，核心内容放在最显眼的中部，次要内容或辅佐内容放在两侧，适当调整各模块的布局，表明核心内容各项组成的详细情况，达到直观展现数据、各内容模块又紧密结合的效果。颜色采用简洁系列，避免过度的视觉干扰，强调数据，更显活力。</p>'
        },{
          img: require('@/assets/img/daping/gcgl.jpg'),
          title: '数据大屏演示平台',
          content: '<p>通过数据大屏演示平台，可以为企业管理人员，清晰地展现各公司的收入数据分布与投资项目贷款情况的动态数据，助力企业管理人员更好的了解项目的财务状况，及时针对项目做出应对。</p>' +
            '<p>该大屏采用的是左中右主次结构，是根据业务需求重点展现各公司的分布情况，其次展示贷款提取进度、付款计划提前回购等内容挑选出来比较适合的版面。</p>'
        }
      ]
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    goDetails(link) {
      if(link.productName === '数据大屏') {
        this.getDetails()
        return
      }
      let path = link.productName === '报表平台' ? '/product/report' :
        link.productName === '数据大屏' ? '/product/daping' :
          link.productName === '数据集算' ? '/product/dataprocess' : '/product-detail'
      this.$router.push({
        path: path,
        query:{
          id: link.productId
        }
      });
    },
    getDetails() {
      document.title = '数据大屏'
      this.preview = {
        productName: '实时数据可视化',
        productSlogan: '满足企业经营分析、业务监控、风险预警等业务需求',
        btn: '迈安大屏',
        productImg: this.productImg
      }
      console.log(this.preview)
    }
  }
}
